import { useState, useEffect } from "react"
import { Modal, Input, Form } from "antd"
import { PullRequestOutlined } from '@ant-design/icons'
import PropTypes from "prop-types"
import InputBoolean from "./InputBoolean"
import InputUser from "./InputUser"
import InputUserGroup from "./InputUserGroup"
import InputSelect from "./InputSelect"
import InputRadio from "./InputRadio"

const AssignmentForm = ({
  values = {},
  onChangeValues
}) => {

  const handleChangeValues = (obj) => {
    const newValue = ({
      ...values,
      ...obj
    })
    onChangeValues(newValue)
  }

  return <Form
    labelCol={{ span: 6 }}
    wrapperCol={{ span: 17 }}
    size="default"
  >
    <Form.Item label="类型">
      <InputRadio
        value={values.type}
        onChange={(e) => {
          handleChangeValues({
            type: e.target.value
          })
        }}
        options={[
          { value: 'idm', label: '身份存储' },
          { value: 'static', label: '固定值' },
        ]}
        disabled={true}
      ></InputRadio>
    </Form.Item>
    {
      values.type === 'idm' &&
      <Form.Item label="分配">
        <InputSelect
          value={values.idmType}
          onChange={(value) => {
            handleChangeValues({
              idmType: value
            })
          }}
          options={[
            { value: 'initiator', label: '分配给流程发起人' },
            { value: 'user', label: '分配给单个用户' },
            { value: 'users', label: '候选用户' },
            { value: 'groups', label: '候选组' },
          ]}
        ></InputSelect>
      </Form.Item>
    }
    {
      (values.idmType === 'user' && values.type === 'idm') &&
      <Form.Item label="分配给单个用户">
        <InputUser
          saveType="all"
          usePosition="modeler"
          value={values.assignee}
          onChange={(value) => {
            handleChangeValues({
              assignee: value
            })
          }}
        ></InputUser>
      </Form.Item>
    }
    {
      (values.idmType === 'users' && values.type === 'idm') &&
      <Form.Item label="候选用户">
        <InputUser
          saveType="all"
          usePosition="modeler"
          multiple
          value={values.candidateUsers}
          onChange={(value) => {
            handleChangeValues({
              candidateUsers: value
            })
          }}
        ></InputUser>
      </Form.Item>
    }
    {
      (values.idmType === 'groups' && values.type === 'idm') &&
      <Form.Item label="候选组">
        <InputUserGroup
          saveType="all"
          usePosition="modeler"
          multiple
          value={values.candidateGroups}
          onChange={(value) => {
            handleChangeValues({
              candidateGroups: value
            })
          }}
        ></InputUserGroup>
      </Form.Item>
    }
    <Form.Item label="允许流程发起人完成任务" name="initiatorCanCompleteTask">
      <InputBoolean
        value={values.initiatorCanCompleteTask}
        onChange={(value) => {
          handleChangeValues({
            initiatorCanCompleteTask: value
          })
        }}
      />
    </Form.Item>
  </Form>
}

AssignmentForm.propTypes = {
  values: PropTypes.object,
  onChangeValues: PropTypes.func
}

const formatValue = (value) => {
  if (!value) return {
    type: 'idm'
  }
  let _values = {}
  const { assignment } = value
  if (assignment) {
    _values = {
      type: assignment.type,
      initiatorCanCompleteTask: assignment.initiatorCanCompleteTask
    }
    if (assignment.type === 'idm' && assignment.idm) {
      _values.idmType = assignment.idm.type
      switch (assignment.idm.type) {
        case 'user':
          _values.assignee = assignment.idm.assignee
          break
        case 'users':
          _values.candidateUsers = assignment.idm.candidateUsers
          break
        case 'groups':
          _values.candidateGroups = assignment.idm.candidateGroups
          break
      }
    } else {

    }
  }
  return _values
}

const reformatValue = (val) => {
  const newValues = {
    assignment: {
      initiatorCanCompleteTask: val.initiatorCanCompleteTask,
      type: val.type
    }
  }
  if (val.type === 'idm') {
    const idm = {
      type: val.idmType
    }
    switch (val.idmType) {
      case 'user':
        idm.assignee = val.assignee
        break
      case 'users':
        idm.candidateUsers = val.candidateUsers
        break
      case 'groups':
        idm.candidateGroups = val.candidateGroups
        break
    }
    newValues.assignment.idm = idm
  } else if (val.type === 'static') {

  }

  return newValues
}

const InputUserTaskAssignment = ({
  value,
  onChange
}) => {

  const [val, setVal] = useState({
    type: 'idm'
  })
  const [visible, setVisible] = useState(false)

  const handleConfirm = () => {
    onChange(reformatValue(val))
    setVisible(false)
  }

  useEffect(() => {
    setVal(formatValue(value))
  }, [value])

  const handleAfterClose = () => {
    setVal(formatValue(value))
  }

  const getInputValue = () => {
    const _value = formatValue(value)
    if (_value) {
      if (_value.idmType === 'initiator') {
        return '流程发起人'
      }
      if (_value.idmType === 'user') {
        return _value.assignee ? '用户：' + _value.assignee.firstName + _value.assignee.lastName : ''
      }
      if (_value.idmType === 'users') {
        return _value.candidateUsers ? _value.candidateUsers.length + '候选用户' : ''
      }
      if (_value.idmType === 'groups') {
        return _value.candidateGroups ? _value.candidateGroups.length + '候选用组' : ''
      }
    } else {
      return ''
    }
  }

  return <>
    <Input
      onClick={() => setVisible(true)}
      value={getInputValue()}
      addonBefore={<PullRequestOutlined />}
    ></Input>
    <Modal
      width={720}
      title="分配用户"
      visible={visible}
      keyboard={false}
      maskClosable={false}
      onCancel={() => setVisible(false)}
      onOk={handleConfirm}
      size="default"
      afterClose={handleAfterClose}
    >
      <AssignmentForm
        values={val}
        onChangeValues={setVal}
      ></AssignmentForm>
    </Modal>
  </>
}

InputUserTaskAssignment.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func
}

InputUserTaskAssignment.propsMap = []

export default InputUserTaskAssignment
